<template>
  <div class="designer-wrap">
    <div class="designer-content-box" :style="{ height: readable.value ? '100vh' : 'calc(100vh - 50px)' }">
      <div class="flow-design-wrap">
        <div id="flow-design" class="flow-design-container" :style="zoomStyle">
          <div id="flow-design-content" class="flow-design-content">
            <!-- <FlowStartNode :node="nodeData" /> -->
            <FlowNode :node="nodeData" :readable="readable.value"/>
            <FlowEndNode :node="nodeData" :readable="readable.value"/>
          </div>
        </div>
        <!--        <FlowHelper v-if="!readable" />-->
        <FlowTips v-if="readable.value"/>
        <FlowZoom v-model="zoomValue.value"/>
        <!-- <FlowMap v-if="!isMobile" /> -->
      </div>
    </div>
  </div>
</template>
<script setup name="">
import FlowZoom from '../../common/FlowZoom.vue';
import FlowTips from '../../common/FlowTips.vue';
import FlowNode from './node/FlowNode.vue'
import FlowEndNode from './node/FlowEndNode.vue';
import {reactive, ref, createApp, defineEmits, defineProps, computed, onMounted, toRefs} from "vue";
import {useStore} from 'vuex';
/* 组件局部注册 */
const app = createApp({});
const store = useStore();


//注册组件
// app.component({
//   FlowMap, FlowZoom, FlowNav, FlowHelper, FlowTips, FlowStartNode, FlowNode, FlowEndNode
// });


//接收父组件传过来的值

const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return getStartNode();
    },
  },
  navable: {
    type: Boolean,
    default: true,
  },
  readable: {
    type: Boolean,
    default: false,
  },
});

const {node, navable, readable} = toRefs(props);
const emit = defineEmits(["publish"])
//定义一个数据
const zoomValue = ref(90);
//reactive 主要是用来处理复杂的数据类型，比如对象和数组。
//所以当你传递的是非对象时，页面不会发生响应
//错误示范
// let error = reactive(err)
//正确示范
// let right = reactive({
// 	name:"张三"
// })
// //修改值得时候
// right.name = "李四"

//  vue2 => computed
const zoomStyle = computed(() => {
  console.log("------------------",zoomValue.value)
  return zoomValue.value / 100
});

const nodeData = computed(() => {
  return store.state.process.node;
})

//mounted => onMounted
onMounted(() => {
  store.dispatch('process/setNode', node.value);
})

// getData() {
//         return this.nodeData;
//       },
const getData = () => {
  return nodeData.value;
}

const toReturn = () => {

}

const publish = () => {
  emit('publish', nodeData.value);
}

</script>